/* 滚动槽 */
::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
::-webkit-scrollbar-track {
  border-radius: 2px;
  background: rgba(150,150,150,0.2);
  -webkit-box-shadow: inset 0 0 5px (200,200,200,0);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: rgba(150,150,150,0.2);
  -webkit-box-shadow: inset 0 0 5px (200,200,200,0);
}

// main
.main {
  border-radius: 0.2rem !important;
  box-shadow: 1px 6px 29px -2px rgba(0, 0, 0, 0.1) !important;
}

.section {
  background-color: #fff !important;
}
// nav
.navbar-item {
  img {
    max-height: 3.75rem !important;
  }

  h1 {
    color: $minor-color;
    font-size: 28px;
    font-family: "Microsoft Yahei";
  }
}


.navbar-link::after {
  border-color: $base-color !important;
}

.navbar-menu {
  padding: 0 !important;
}

.navbar-burger {
  margin-top: auto;
  margin-bottom: auto;
}

// title
.title {
  margin-bottom: 2.8rem !important;
  a {
    color: $minor-color !important;
  }
}

// tag
.tag:not(body).is-primary {
  background-color: $base-color !important;
}
.tags {
  margin-bottom: 1.2em !important;

  .icon {
    margin-right: 10px;
    svg {
      width: 1.15em;
    }
  }

  a,
  .container {
    color: #7a8b9a !important;
    margin-right: 10px !important;
    font-size: .875rem !important;
    font-family: Segoe UI, "Microsoft Yahei" !important;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin: 2px 0;
  }

  
  .formated-date-left-space, .reading-time {
    margin: 0 10px !important;     
  }

  a:hover {
    text-decoration: underline;
    color: $base-color !important;
  }

  .spot {
    color: $base-color;
  }
}

// license
.article_license {
  margin-top: 5rem;
  font-size: 1rem;
  line-height: 1.8;
  color: #1f314d !important;
  border-top: 1px dashed #bfc1c180;
  border-bottom: 1px dashed #bfc1c180;
  font-style: italic;
  p {
    margin: 1.5rem 0;
  }  
  strong {
    color:#464646;
  }
}

// post
.post-footer {

  display: flex;
  justify-content: flex-end;
  padding-top: 6rem;
  padding-bottom: 2em;
  font-size: x-large;

  a {
    color: $base-color !important;

    &:hover {
      color: $minor-color !important;
    }
  }

  .post-next {
    margin-left: 20px;
    max-width: 400px; 
    svg {
      margin-left: 5px;
    } 
  }
  .post-previous {
    max-width: 400px;
    svg {
      margin-right: 5px;
    }
  }
}
.navbar-menu, .post-next, .post-previous, .formated-date, .spot, .footer, .back-to-top, .tags, img, .article-type{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  svg {  
    font-size: 14px !important;
    height: 1.08em !important;
  }
}

// img
.sketch-article-img img {
  margin-bottom: 1em;
  border-radius: 0.2rem !important;
  box-shadow: 1px 6px 29px -2px rgba(0, 0, 0, 0.1) !important;
  height: 8rem !important;
  object-fit: cover;
  cursor: pointer;

  @include media-max(450px) {
    height: 6rem !important;
  }
}

.sketch-media-music-kg-right-content {
  color: #7a8b9a !important;
  font-size: .875rem !important;
}

.sketch-media-music-kg {
  margin-top: 1rem !important;
  a {
    margin: 0px !important;
    background-color: #f9f9f9;
    border-radius: 0.8rem !important;
    box-shadow: 1px 6px 29px -2px rgba(0, 0, 0, 0.1) !important;

    &:hover {
      cursor: pointer;
    }

    .sketch-media-music-kg-content {

      .qmkg-audio {
        margin-top: 20px;
        width: 75%;
        height: 30px;

        audio {
          width: 100%;
          height: 100%;
        }

        @include media-max(500px) {
          margin-top: 4%;
        }
      }


      @include media-max(400px) {
        font-size: 0.9em;
      }

      padding: 20px;
      margin: auto;

      @include media-max(500px) {
        padding: 6px 16px;
      }

      .qmkg-title {
        margin-bottom: 10px;

        @include media-max(400px) {
          margin-bottom: 8px;
        }

        color: black;
      }

      .qmkg-level {
        color: #f7b056;
        font-weight: bold;
      }
    }

    .sketch-media-music-kg-img {
      padding: 0px !important;
      max-width: 8rem !important;
      max-height: 8rem !important;
      height: 8rem !important;
      border-top-left-radius: 0.8rem !important;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0.8rem !important;
      object-fit: cover;
      cursor: pointer;

      @include media-max(450px) {
        max-width: 6rem !important;
        max-height: 6rem !important;
      }
    }

    .sketch-media-music-kg-content {
      position: relative;

      .qmkg-logo {
        height: auto;
        width: 40px;
        position: absolute;
        right: 3%;
        top: 60%;
        opacity: 0.75;
        border-radius: 25%;

        @include media-max(450px) {
          right: 5%;
          top: 60%;
          width: 30px;
        }

        @include media-max(400px) {
          right: 3%;
          top: 70%;
          width: 25px;
        }
      }
    }

  }

}

.post-img img {
  margin-bottom: 1em;
  border-radius: 0.2rem !important;
  box-shadow: 1px 6px 29px -2px rgba(0, 0, 0, 0.1) !important;
  width: 100% !important;
  object-fit: cover;

  @include media-min-max(0, 400px) {
    height: 8rem !important;
  }

  @include media-min-max(400px, 500px) {
    height: 12rem !important;
  }

  @include media-min-max(500px, 600px) {
    height: 14rem !important;
  }

  @include media-min-max(600px, 800px) {
    height: 16rem !important;
  }

  @include media-min-max(600px, 4000px) {
    height: 18rem !important;
  }
}

.avatar {
  margin-left: 8px;
  padding: 8px !important;
  cursor: pointer;

  img {
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
  }
}

.has-dropdown {
  .navbar-dropdown {
    font-size: 15px;
    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1) !important;

    .icon-dropdown svg {
      margin-right: 10px;
      font-size: 20px !important;
      color: $base-color;
    }
  }
}


// footer
.footer {
  background-color: #fff !important;

  .container .content p {
    font-size: .75rem !important;
    color: #7a8b9a !important;
  }
}

// back-to-top
.back-to-top {
  cursor: pointer !important;
  position: fixed;
  width: 48px;
  height: 48px;
  right: 25px;
  bottom: 25px;
  z-index: 10000;
  display: none;

  a {
    color: #fff !important;
    &:active {      
      background-color: $base-color;
      color: white !important;
      box-shadow: 5px 4px 14px 6px $base-shadow-color !important;
    }    
  }

  .icon-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    background-color: $minor-color;
    box-shadow: 5px 4px 14px 6px $minor-shadow-color !important;
    overflow: hidden;
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
    border-radius: .2rem;

    ion-icon {
      position: absolute;
      top: 9px;
      left: 50%;
      transition: .15s ease 50ms;

      &:hover {
        transform: translateX(-50%);
      }
    }

    .back-to-top-text {
      display: inline-block;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .05em;
      line-height: 1em;
      transition: transform .35s cubic-bezier(.165, .84, .44, 1);

      &:hover {
        transform: translateY(6px);
      }
    }
  }
}

.sketch-container {
  padding: 1.6rem 0;
  border-bottom: 1px solid #e6ebecb5;
  border-radius: .22rem;
}

.article-type-original {
  background-color: $base-color;
}
.article-type-translated {
  background-color: $article-type-color-pink;
}
.article-type-reprinted {
  background-color: $article-type-color-yellow;
}

.article-type {
  font-size: 16px;
  font-weight: 500;
  color: white;
  padding: 3px 14px;
  border-radius: 4px;
  margin-right: 6px;
}

.post {
  .article-type {
    margin-left: 10px;
  }
}

// post sketch
.post_article {

  .title {
    margin-bottom: 1rem !important;
    a {
      font-size: 1.25rem !important;      
      &:hover {
        color: $base-color !important;
      }
    }
  }

  .content {
    margin-top: 1rem !important;

    .excerpt p,
    .excerpt {
      color: #333e48 !important;
      font-size: .875rem !important;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
// pagination

.pagination-list {
  li {
    list-style: none;
    margin-top: 0em !important;
  }
}
.pagination {
  margin-top: 40px !important;

}

.pagination-link {
  border: 0px !important;
  background-color: #f4f5f9 !important;

  color: $minor-color !important;
  
  &:hover {
    color: $base-color !important;
  }

  &.is-current {
    color: #f4f5f9 !important;
    background-color: $base-color !important;
    border-color: $base-color !important;
    box-shadow: -1px 4px 14px 0px $base-shadow-color;

    &:hover {
      color: $minor-color !important;
    }
  }

  &.pagination-next,
  &.pagination-previous {
    &:hover {
      background-color: $base-color !important;
      border-color: $base-color !important;
      box-shadow: 1px 2px 16px 1px $base-shadow-color;
      color: #fff !important;
    }
  }
}

//tag_cloud
.tag-cloud {
  .all-tags {
    margin-bottom: 0px !important;
    box-shadow: 1px 5px 20px -5px rgba(0, 0, 0, 0.1) !important;
    display: inline-block;

    .tag {
      padding: .25em .75em;
      font-size: 1em;
      text-transform: uppercase;
      display: inline-block;
      margin-bottom: 0px;
      margin-right: -4px !important;
      border-top-right-radius: 5px !important;
      border-bottom-right-radius: 5px !important;
    }

    .tag.is-primary {
      border-bottom-left-radius: 5px !important;
      border-bottom-right-radius: 0px !important;
      border-top-left-radius: 5px !important;
      border-top-right-radius: 0px !important;
    }
  }

  .tag-cloud-tags {
    text-align: center;
    // font-family: Athelas, STHeiti, Microsoft Yahei, serif;
    position: relative;
    padding: 30px 10px;
    margin: 30px 0;
    border-radius: 5px;
    border-radius: 0.8rem !important;
    box-shadow: 3px 7px 65px -30px rgba(0, 0, 0, 0.26) !important;

    .current-tag {
      color: $base-color;
      font-size: 2.8rem !important;
      font-weight: bolder !important;

      &:hover {
        color: $minor-color !important;
      }
    }

    a {
      color: $minor-color;
      display: inline-block;
      position: relative;
      margin: 5px 10px;
      word-wrap: break-word;
      transition-duration: .2s;
      transition-property: transform;
      transition-timing-function: ease-out;

      &:hover {
        color: $base-color !important;
      }
    }
  }
}

// category
.category-head {
  margin-bottom: 3rem;
}

.category-posts {
  .head-year {
    font-weight: 500;
    position: relative;
    margin: 30px 0 20px;
    font-size: 1.3em !important;
    color: #444;
    cursor: pointer;
    margin-bottom: 5px;
    font-family: Microsoft Yahei, "微软雅黑", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;

    &::after {
      font-weight: 600;
      position: absolute;
      top: 0;
      left: 80px;
      content: '#';
      color: $base-color;
    }
  }

  .month-list {
    list-style: none;
    overflow: hidden;
    padding-left: 1.2rem;

    @include media-max(500px) {
      padding-left: .8rem;
    }

    margin-left: 0px !important;

    .month {
      margin: .6em 0;
      line-height: 1.8em;
      margin-bottom: 12px !important;

      .head-month {
        cursor: pointer;

        .head-month-post-num {
          margin-left: .4rem;
          font-weight: 500;
        }
      }

      .day-list {
        list-style: none;
        overflow: hidden;
        padding-left: 1.2rem;

        @include media-max(500px) {
          padding-left: .8rem;
        }

        margin-left: 0px !important;

        li {
          margin: .6em 0;
          line-height: 1.8em;
          color: #8c8787;
          overflow: hidden;
          text-overflow: ellipsis;
          display: flex;
          border-radius: 0.2rem !important;
          border-bottom: 1px solid #e7e4e4;
          padding: 10px;

          .day {
            width: 300px;
            max-width: max-content;
            cursor: pointer;
            height: 100%;
          }
          .day-content {
            padding-left: .4rem;
            .excerpt {
              border: none !important;
              color: $minor-color !important;
              font-weight: 500;
              cursor: pointer;
            }
            .day-post-content {
              display: none;
              .day-post-tags {
                a {
                  color: #7a8b9a !important;
                  margin-right: 10px !important;
                  font-size: .875rem !important;
                  font-family: Segoe UI, "Microsoft Yahei" !important;
                  &:hover {
                    color: $base-color !important;
                    cursor: pointer;
                    text-decoration: underline;
                  }
                }
              }
              a {
                font-size: 0.9rem !important;
                margin: .5rem 0 .5rem;
                color: #333e48 !important;
                &:hover {
                  color: $base-color !important;
                  cursor: pointer;
                }
              }
            }
          }

        }
      }
    }
  }
}